@use 'sass:math';
#view_cropper {
    --crosshair_length: 11px;
    --crosshair_color: red;

    //overflow: hidden;
    :deep(.cropper-center) {

        &::before {
            background-color: var(--crosshair_color);
            width: var(--crosshair_length);
            left: calc(-1 * (var(--crosshair_length) - 1px) / 2);

        }

        &::after {
            background-color: var(--crosshair_color);
            height: var(--crosshair_length);
            top: calc(-1 * (var(--crosshair_length) - 1px) / 2);
        }
    }

    ////////////////////////////////////////////////////
    /// 
    ///             圆形遮罩
    /// 
    /// ///////////////////////////////////////////
    .container-mask {
        &.circle {
            :deep(.cropper-view-box) {

                //overflow: hidden;
                &::after {
                    pointer-events: none;
                    content: "";
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    //border: 1px solid #d0d0ff;
                    //border-radius: 100%;
                    background-image: radial-gradient(circle, transparent 70.5%, #00000050 71%, #00000050);
                }
            }
        }
    }



    ////////////////////////////////////////////////////
    /// 
    ///             对角线
    /// 
    /// ///////////////////////////////////////////
    .container-mask {
        :deep(.cropper-crop-box) {}

        :deep(.cropper-crop-box) {
            --selector_width: 0px;
            --selector_height: 0px;
            --selector_opposite_angle: 0deg;
            --selector_opposite_line_length: 0px;
            --selector_opposite_line_deg: 0deg;
        }

        :deep(.dashed-h),
        :deep(.dashed-v) {
            opacity: 1;
        }


        &.golden_selection {
            :deep(.dashed-h) {
                //两条垂直参考线
                border-color: hsl(47, 100%, 50%);
                top: 38.2%;
                height: 23.6%;
            }

            :deep(.dashed-v) {
                //两条水平参考线
                border-color: hsl(47, 100%, 50%);
                left: 38.2%;
                width: 23.6%;
            }
        }

        &.opposite_angle {
            $line-length: 10000px;
            $line-color: blue;

            :deep(.dashed-h),
            :deep(.dashed-v) {
                width: 100%;
                height: 100%;
                overflow: hidden;
                border: none;

                &::before,
                &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    height: 1px;
                    width: $line-length;
                    //background: linear-gradient(to right, transparent 0%, transparent 50%,#ccc 100%) ;
                    //border-top: 1px dashed $line-color;
                    background: linear-gradient(to left, transparent 0%, transparent 50%, $line-color, $line-color 100%);
                    background-size: 10px 1px;
                    background-repeat: repeat-x;
                }
            }

            :deep(.dashed-h) {
                //右边两个角为顶点，往中心射的45度线
                top: 0;

                &::before,
                &::after {
                    transform: translateX(calc(70.710% - $line-length / 2));
                    right: 0;
                }

                &::before {
                    //右下角
                    bottom: math.div($line-length, -2);
                    rotate: 45deg;
                }

                &::after {
                    //右上角
                    top: math.div($line-length, -2);
                    rotate: -45deg;
                }
            }

            :deep(.dashed-v) {
                //左边两个角为顶点，往中心射的45度线
                left: 0;

                &::before,
                &::after {
                    left: math.div($line-length, -2);
                    transform: translateX(calc($line-length / 2));
                }

                &::before {
                    //左上角射线
                    rotate: 45deg;
                    top: 0px;
                }

                &::after {
                    //左下角射线
                    rotate: -45deg;
                    top: 100%;

                }
            }



        }

        &.triangleLB-RT {
            $line-length: 10000px;
            $border-color: orangered;

            :deep(.dashed-h),
            :deep(.dashed-v) {
                width: 100%;
                height: 100%;
                border: none;
                left: 0;
                top: 0;
                overflow: hidden;

                &::before,
                &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    height: 0px;
                    border-top: 1px dashed $border-color;
                }
            }

            :deep(.dashed-h) {

                //对角线
                &::before,
                &::after {
                    width: $line-length;
                    left:  math.div($line-length, -2);
                    transform: translateX(calc($line-length / -2));
                }

                &::before {
                    //左上->右下对角线
                    rotate: calc(270deg - var(--selector_opposite_angle));
                    top: 0px;
                }

                &::after {
                    //左下->右上对角线
                    rotate: calc(var(--selector_opposite_angle) + 90deg);
                    top: 100%;
                }
            }

            :deep(.dashed-v) {

                //过顶点到对角线的垂线
                &::before,
                &::after {
                    width: var(--selector_opposite_line_length);
                    rotate: calc(-90deg - var(--selector_opposite_line_deg));
                }

                &::before {
                    //[左上角]到[左下->右上对角线]的垂线
                    transform: translateX(calc(var(--selector_opposite_line_length) / -2));
                    top: 0px;
                    left: calc(var(--selector_opposite_line_length) / -2);
                }

                &::after {
                    //[右下角]到[左下->右上对角线]的垂线
                    transform: translateX(calc(var(--selector_opposite_line_length) / 2));
                    top: 100%;
                    right: calc(var(--selector_opposite_line_length) / -2);
                }
            }
        }

        &.triangleLT-RB {
            $line-length: 1000px;
            $border-color: orangered;

            :deep(.dashed-h),
            :deep(.dashed-v) {
                width: 100%;
                height: 100%;
                border: none;
                left: 0;
                top: 0;

                &::before,
                &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    height: 0px;
                    border-top: 1px dashed $border-color;
                }
            }

            :deep(.dashed-h) {
                overflow: hidden;

                &::before,
                &::after {
                    width: $line-length;
                    left: math.div($line-length, -2);
                    transform: translateX(calc($line-length / -2));
                }

                &::before {
                    rotate: calc(270deg - var(--selector_opposite_angle));
                    top: 0px;
                }

                &::after {
                    rotate: calc(var(--selector_opposite_angle) + 90deg);
                    top: 100%;
                }
            }

            :deep(.dashed-v) {

                &::before,
                &::after {

                    width: var(--selector_opposite_line_length);

                    rotate: calc(var(--selector_opposite_line_deg) + 90deg);
                }

                &::before {
                    transform: translateX(calc(var(--selector_opposite_line_length) / -2));
                    left: calc(var(--selector_opposite_line_length) / -2);
                    top: 100%;
                }

                &::after {
                    transform: translateX(calc(var(--selector_opposite_line_length) / 2));
                    top: 0;
                    right: calc(var(--selector_opposite_line_length) / -2);
                }



            }
        }
    }


}